<template>
  <el-card>
    <el-table
        v-loading="state.dataListLoading"
        :data="state.dataList"
        row-key="id"
        border
        default-expand-all
        class="layout-table">
      <el-table-column prop="name" label="名称" header-align="center"></el-table-column>
      <el-table-column
          prop="amount"
          label="平台年费"
          header-align="center"
          align="center"></el-table-column>
      <el-table-column
          prop="simAmount"
          label="卡年费"
          header-align="center"
          align="center"></el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="160">
        <template #default="scope">
          <el-button
              v-auth="'sys:org:delete'"
              type="primary"
              link
              @click="addOrConfigHandle(scope.row)"
            >配置年费</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <add-or-update ref="addOrConfigHandleRef" @refresh-data-list="getDataList"></add-or-update>
  </el-card>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { nextTick, reactive, ref } from 'vue'
import AddOrUpdate from './add-or-update.vue'
import { IHooksOptions } from '@/hooks/interface'

const state: IHooksOptions = reactive({
  dataListUrl: '/gps/pay/orgAnnualAmount/orgList',
  // deleteUrl: '/sys/org',
  isPage: false
})

const addOrConfigHandleRef = ref()
const addOrConfigHandle = (id) => {
  addOrConfigHandleRef.value.init(id)
}

const { getDataList } = useCrud(state)

</script>
